<template>
  <div class="user-center-container p-20px">
    <div class="user-center-header flex justify-center gap-24px flex-wrap" style="margin-top:1%;">
      <!-- 左侧：用户头像和基本信息卡 -->
      <ElCard class="user-info-card" :body-style="{ padding: '20px' }">
        <div class="user-info-header flex justify-center">
          <div class="avatar-container relative flex flex-col items-center">
            <div 
              @click="openDialog"
              class="avatar-placeholder flex justify-center items-center"
              v-if="!userInfoForm.userImages"
            ></div>
            
            <ElAvatar v-else :size="100" :src="userInfoForm.userImages" @click="previewAvatar" style="cursor: pointer" />
            <div class="avatar-actions absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4">
              <ElButton 
                type="primary" 
                circle 
                size="small" 
                class="edit-avatar-btn"
                @click="openDialog"
                :icon="Edit"
              />
            </div>
          </div>
        </div>

          <ElDescriptions :column="1" border>
            <ElDescriptionsItem label="用户名称">
              {{ userInfo.userName || 'admin' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="手机号码">
              {{ userInfo.userPhone || '15888888888' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="电子邮箱">
              {{ userInfo.userEmail || 'ry@163.com' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="性别">
              <ElTag v-if="userInfo.userGender" type="primary">
                {{ userInfo.userGender === '1' ? '男' : '女' }}
              </ElTag>
              <span v-else>未设置</span>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="所属角色">
               <ElTag type="primary" v-for="role in userInfo.roles">
                {{role}}
               </ElTag>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="最后登录时间">
              {{ userInfo.lastLoginTime || '2024-06-30 11:27:11' }}
            </ElDescriptionsItem>
              <ElDescriptionsItem label="最后登录IP">
              {{ userInfo.lastLoginIp || ''}}
            </ElDescriptionsItem>
          </ElDescriptions>
       
      </ElCard>

      <!-- 右侧：标签页内容 -->
      <ElCard style="width: 60%;">
        <ElTabs v-model="activeTab" class="user-tabs">
          <!-- 基本资料标签页 -->
          <ElTabPane label="基本资料" name="basic">
            <ElForm ref="userInfoFormRef" :model="userInfoForm" :rules="userInfoRules" label-width="100px">
              <ElFormItem label="用户名" prop="userName">
                <ElInput v-model="userInfoForm.userName" placeholder="请输入用户昵称" />
              </ElFormItem>
                 <ElFormItem label="性别" prop="userGender">
                <ElRadioGroup v-model="userInfoForm.userGender">
                  <ElRadio :label="'1'">男</ElRadio>
                  <ElRadio :label="'2'">女</ElRadio>
                </ElRadioGroup>
              </ElFormItem>
              <ElFormItem label="用户昵称" prop="nickName">
                <ElInput v-model="userInfoForm.nickName" placeholder="请输入用户昵称" />
              </ElFormItem>
              <ElFormItem label="手机号码" prop="userPhone">
                <ElInput v-model="userInfoForm.userPhone" placeholder="请输入手机号码" />
              </ElFormItem>
              <ElFormItem label="邮箱" prop="userEmail">
                <ElInput v-model="userInfoForm.userEmail" placeholder="请输入邮箱" />
              </ElFormItem>
           
              <ElFormItem>
                <div class="form-actions">
                  <ElButton type="primary" @click="submitUserInfoChange">保存</ElButton>
                  <ElButton @click="resetUserInfoForm">关闭</ElButton>
                </div>
              </ElFormItem>
            </ElForm>
          </ElTabPane>
          
          <!-- 修改密码标签页 -->
          <ElTabPane label="修改密码" name="password">
            <ElForm ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="100px">
              <ElFormItem label="新密码" prop="newPassword">
                <ElInput v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
              </ElFormItem>
              <ElFormItem label="确认密码" prop="confirmPassword">
                <ElInput v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" />
              </ElFormItem>
              <ElFormItem>
                <div class="form-actions">
                  <ElButton type="primary" @click="submitPasswordChange">保存</ElButton>
                  <ElButton @click="resetPasswordForm">关闭</ElButton>
                </div>
              </ElFormItem>
            </ElForm>
          </ElTabPane>
        </ElTabs>
      </ElCard>
    </div>
  
    
    <!-- 素材选择对话框 -->
<el-dialog v-model="dialogVisible" title="选择素材" width="1000px" destroy-on-close>
      <manage :flag="mediaType" @selectImage="selectMedia" />
    </el-dialog>

    
    <!-- 图片预览组件 -->
    <ElImageViewer
      v-if="previewVisible"
      :url-list="previewImages"
      :initial-index="previewIndex"
      @close="previewVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { ElCard, ElAvatar, ElDescriptions, ElDescriptionsItem, ElTag, ElButton, ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElImageViewer, ElTabs, ElTabPane } from 'element-plus';
import { Edit } from '@element-plus/icons-vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import { updateUser } from '@/service/api/system-manage';
import manage from "@/views/function/material/Image/index.vue"

const authStore = useAuthStore();
const userInfo = computed(() => authStore.userInfo);
const loading = ref(true);
const error = ref(false);

onMounted(async () => {
  loading.value = true;
  error.value = false;
  
  try {
    if (!userInfo.value.userId) {
      await authStore.getUserInfo();
    }
  } catch (e) {
    console.error('Failed to load user info:', e);
    error.value = true;
  } finally {
    loading.value = false;
  }
});

const avatarUrl = computed(() => {
  return userInfo.value.userImages || 'http://127.0.0.1:9000/image-bucket/20250514/fbee6c07a7d24746884456b56b6a21bfd1ee7e8c-5af4-462a-bf59-e58a053dba21.jpg';
});
</script>

<template>
  <div class="user-center-container">
    <div class="user-center">
      <h2 class="title">{{ $t('page.userCenter.title') }}</h2>
      
      <div v-if="loading" class="loading-state">
        <ElSkeleton :rows="5" animated />
      </div>
      
      <div v-else-if="error" class="error-state">
        <div class="error-message">
          {{ $t('common.message.error') }}
        </div>
        <ElButton @click="authStore.getUserInfo()">
          {{ $t('common.button.retry') }}
        </ElButton>
      </div>
      
      <template v-else>
        <el-card class="user-card">
          <div class="user-info">
            <el-avatar :size="80" :src="avatarUrl"></el-avatar>
            <div class="user-details">
              <h3>{{ userInfo.userName }}</h3>
              <p>ID: {{ userInfo.userId }}</p>
              <div class="user-roles">
                <el-tag v-for="role in userInfo.roles" :key="role" size="small">
                  {{ role }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </template>
    </div>
  </div>
</template>

<style scoped>
.user-center-container {
  padding: 20px;
}

.user-center {
  max-width: 800px;
  margin: 0 auto;
}

.title {
  margin-bottom: 20px;
  font-size: 24px;
}

.user-card {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-details {
  margin-left: 20px;
}

.user-details h3 {
  margin: 0 0 8px 0;
}

.user-details p {
  margin: 0 0 12px 0;
  color: #909399;
}

.user-roles {
  display: flex;
  gap: 8px;
}

.loading-state,
.error-state {
  padding: 40px;
  text-align: center;
}

.error-message {
  margin-bottom: 16px;
  color: #f56c6c;
}
</style>
